<template>
  <div style="display: flex; flex-wrap: wrap;  align-content: space-between;" class="common-operation-form">
    <span v-for="(item, index) in list" :key="index" :style="`margin-right: ${marginRight || '12px'}; border-left: ${item.borderLeft || 'none'}; margin-left: ${marginLeft || '0px'};
     display: flex; margin-top: ${marginTop || '6px'};`">
      <span v-if="item.type === 'input'" style="display: flex;">
        <span v-if="item.required" class="text-center text-star">*</span>
        <span class="text-center" :style="`font-size: 14px; width: ${item.width};`">{{ item.text }}</span>
        <el-input :size="item.size || 'small'" :clearable="item.clearable === false ? false : true || true" :style="`width: ${item.inputWidth || '150px'};`" v-model="item.value"
                  :placeholder="item.placeholder || '请输入内容'"></el-input>
      </span>
      <span v-else-if="item.type === 'inputnumber'" style="display: flex;">
          <span class="text-center" :style="`font-size: 14px; color: #000; width: ${item.width};`">{{ item.text }}</span>
         <el-input-number :size="item.size || 'small'" @change.native.prevent="item.inputEvent"
                          :controls="item.controls === false ? false : true"
                           :style="`${item.inputWidth ? `width: calc(${item.inputWidth} - ${item.width})` : '150px'};`"
                          :placeholder="item.placeholder || '￥0.00'" :precision="2"
                          @blur="() => {
                            if(item.keepDecimal) {
                              item.value = keepTwoDecimalFull(item.value)
                            }
                           }"
                           controls-position="right"
                           v-model="item.value" :step="1" :min="0"></el-input-number>

        <span style="display: flex; align-items: center; margin-left: 12px; color: red; font-size: 12px;" v-if="item.arrears">
          {{item.appendText}}{{item.value2}}<span style="margin-left: 2px;">元</span>
        </span>
    </span>
      <span v-else-if="item.type === 'numberRange'" style="display: flex; align-items: center; ">
        <span v-if="item.required" class="text-center text-star">*</span>
        <span class="text-center" :style="`font-size: 14px; width: ${item.width};`">{{ item.text }}</span>
        <div style="display: flex; ">
          <div style="flex: 1;">
            <el-input-number :size="item.size || 'small'" @change="item.changeEvent"  controls-position="right"   style="width: 90px;"
                             v-model="item.value[0]" :step="1" :min="0"></el-input-number>
          </div>
          <div style="margin: 0 2px; font-size: 22px; color: #000; position: relative; top: 6px;">*</div>
          <div style="flex: 1;">
            <el-input-number :size="item.size || 'small'" controls-position="right"   style="width: 90px;"
                             v-model="item.value[1]" :step="1" :min="0"></el-input-number>
          </div>
        </div>
      </span>
      <span v-else-if="item.type === 'numberRangeInput'" class="numberRangeInput" style="display: flex; align-items: center; margin-left: 10px; ">
        <div style="display: flex; ">
          <div style="flex: 1;">
            <el-button  type="text" @click="item.changeEvent(false)" icon="el-icon-zoom-out"  ></el-button>
          </div>
          <div style="flex: 1; margin-left: 2px;">
            <el-button type="text" @click="item.changeEvent(true)" icon="el-icon-zoom-in"  ></el-button>
          </div>
        </div>
      </span>
      <span v-else-if="item.type === 'numberRangeUndoRedo'" class="numberRangeUndoRedo numberRangeInput" style="display: flex; align-items: center; margin-left: 10px; ">
        <div style="display: flex; ">
          <div style="flex: 1;">
            <el-button @click="item.clickEvent('undo')" type="text">
              <svg-icon icon-class="undo" style="font-size: 16px;" />
            </el-button>
          </div>
          <div style="flex: 1; margin-left: 2px;">
             <el-button @click="item.clickEvent('redo')"  type="text">
              <svg-icon icon-class="redo" style="font-size: 16px;"/>
            </el-button>
          </div>
        </div>
      </span>
      <span v-else-if="item.type === 'iconButton'" class="numberRangeInput" :style="`display: flex; align-items: center; margin-left: ${item.marginLeft};  margin-right: ${item.marginRight}`">
        <div style="display: flex; ">
          <el-button :loading="item.loading" :title="item.title" @click="item.clickEvent('undo', listIndex)" :class="[`${item.value ? 'iconButton-choose' : ''}`]" :type="item.buttonType || 'text'">
            <svg-icon v-if="item.loading === false" :icon-class="item.iconClass" :style="`font-size: ${item.fontSize || '16px'};`" />
            <span class="iconButton-iconName" v-if="item.iconName && item.iconName !== '' && !item.loading">{{item.iconName}}</span>
          </el-button>
        </div>
      </span>
      <span v-else-if="item.type === 'colorPicker'" class="numberRangeInput" :style="`display: flex; align-items: center; margin-left: ${item.marginLeft};  margin-right: ${item.marginRight}`">
        <div style="display: flex; " class="colorPicker">
          <el-color-picker @active-change="item.clickEvent" v-model="item.value" size="mini"></el-color-picker>
        </div>
      </span>
      <span v-else-if="item.type === 'numberRangeSelect'" class="numberRangeSelect" style="display: flex; margin-left: 10px; align-items: center; ">
          <el-select size="mini" v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`"
                     value-key="value"
                     filterable  @change="item.changeEvent" :ref="item.ref">
            <el-option v-for="item in item.options"
                       :key="item.value" :label="item.label"
                       :value="item">
            </el-option>

            <span slot="empty"></span>
         </el-select>
      </span>
      <span v-else-if="item.type === 'button'" :style="`display: flex; padding-left: ${item.paddingLeft};
                    border-left: ${item.borderLeft}; ` ">
        <el-button :round="item.round || false" :type="item.buttonText === '搜索' ? 'success' : item.buttonType || 'primary'"
                   :style="`width: ${item.buttonWidth || 'auto'};
                   line-height: ${item.buttonLineHeight || 'auto'};
                    height: ${item.buttonHeight || 'auto'}; font-size: ${item.buttonFontSize || 'auto'}`  "
                   :size="item.size || 'small'" :loading="item.loading"
                   @click="item.event" :icon="item.buttonIcon || ''">{{ item.buttonText }}</el-button>
      </span>
      <span v-else-if="item.type === 'selectAllowCreate'" :style="`display: flex; `">
        <span v-if="item.required" class="text-center text-star">*</span>
        <span class="text-center" value-key="_id"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; `">
          {{ item.text }}
        </span>
         <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`"
                    filterable :allow-create="item.allowCreate === false ? false : true" @change.prevent="item.changeEvent" :ref="item.ref"
                    default-first-option placeholder="请选择">
            <el-option v-for="item in item.options"
                       :key="Math.random()" :label="item.label"
                       :value="item.value">
            </el-option>
         </el-select>
      </span>
      <span v-else-if="item.type === 'selectGroup'" :style="`display: flex; `">
        <span v-if="item.required" class="text-center text-star">*</span>
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; `">
          {{ item.text }}
        </span>
         <el-select v-model="item.value" :popper-class="`select-group ${item.popperClass}`"  :style="`flex: 1; width: ${item.selectWidth};`"
                    filterable :allow-create="item.allowCreate === false ? false : true"
                    value-key="label"  @change="item.changeEvent" :ref="item.ref" :size="item.size || 'small'"
                    default-first-option placeholder="请选择">
            <el-option-group
                v-for="group in item.options"
                :key="Math.random()"
                :label="group.label">
                <el-option
                    v-for="item in group.options"
                    :key="item.label"
                    :label="item.label"
                    :value="item">
                </el-option>
              </el-option-group>
         </el-select>
      </span>
      <span v-else-if="item.type === 'text'" :style="`display: flex; margin-left: ${item.marginLeft || '0px'}`">
        <span class="text-center" :style="`font-size: 14px; width: ${item.width};`">{{ item.text }}</span>
        <span
            :style="`display: flex; color: ${item.textColor}; font-weight: ${item.fontWeight || '400'}; width:${item.textWidth}; align-items: center;`">
          {{item.value}}
        </span>
      </span>
      <span v-else-if="item.type === 'settlementAccount'" :style="`display: flex; `">
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; display: flex;  justify-content: ${item.justifyContent || 'flex-end'}; `">
          <span v-if="item.required" class="text-center text-star">*</span>
          {{ item.text }}
        </span>
        <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`" remote
                   filterable :remote-method="getSettlementAccountList" value-key="label"  class="common-operation-form-icon"
                         :ref="item.ref" placeholder="请选择" placement="top">
           <el-option
               v-for="item in settlementAccount.options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
            </el-option>
           <el-tooltip content="新建结算账户" placement="top"   slot="prefix">
              <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;"
                        @click.stop="addSettlementAccount"></svg-icon>
            </el-tooltip>

        </el-select>
      </span>
      <span v-else-if="item.type === 'employeeSetting'" :style="`display: flex; `">
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; display: flex; justify-content: flex-end;`">
          <span v-if="item.required" class="text-center text-star">*</span>
          {{ item.text }}
        </span>
        <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`" class="common-operation-form-icon"
                   remote filterable placement="top" :fetch-suggestions="getEmployeeList" value-key="label"
                   :ref="item.ref" placeholder="请选择">
           <el-tooltip content="新建制单员" placement="top"   slot="prefix">
              <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;"
                        @click.stop="getEmployeeSettings"></svg-icon>
           </el-tooltip>
           <el-option
               v-for="item in employee.options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
          </el-option>
        </el-select>
      </span>
      <span v-else-if="item.type === 'supplierSetting'" :style="`display: flex; `">
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; display: flex; justify-content: ${item.justifyContent || 'flex-end'};`">
          <span v-if="item.required" class="text-center text-star">*</span>
          {{ item.text }}
        </span>
        <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`"  class="common-operation-form-icon"
                   :disabled="item.disabled || false"
                    placement="top"   value-key="label" clearable
                   :ref="item.ref" collapse-tags :multiple="item.multiple" placeholder="请选择">
           <el-tooltip content="新建供应商" placement="top"   slot="prefix">
              <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;"
                        @click.stop="addSupplier"></svg-icon>
           </el-tooltip>
           <el-option
               v-for="item in supplier.options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
          </el-option>
        </el-select>
      </span>
      <span v-else-if="item.type === 'warehouse'" :style="`display: flex; `">
        <span class="text-center" v-if="item.showText === false ? false : item.showText || true"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; display: flex; justify-content: flex-end;`">
          <span v-if="item.required" class="text-center text-star">*</span>
          {{ item.text }}
        </span>
        <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`"  class="common-operation-form-icon"
                   remote placement="top" :fetch-suggestions="getWarehouseList" value-key="label"
                   :ref="item.ref" collapse-tags :multiple="item.multiple" :placeholder="item.placeholder || '请选择'">
           <el-tooltip v-if="item.newWarehouse === false ? false : true" content="新建仓库" placement="top"   slot="prefix">
              <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;"
                        @click.stop="addWarehouse"></svg-icon>
           </el-tooltip>
           <el-option
               v-for="item in warehouse.options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
          </el-option>
        </el-select>
      </span>
      <span v-else-if="item.type === 'warehouse2'" :style="`display: flex; `">
        <span class="text-center" v-if="item.showText === false ? false : item.showText || true"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; display: flex; justify-content: flex-end;`">
          <span v-if="item.required" class="text-center text-star">*</span>
          {{ item.text }}
        </span>
        <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`"  class="common-operation-form-icon"
                   remote placement="top" :fetch-suggestions="getWarehouseList2" value-key="_id" @change="item.changeEvent"
                   :ref="item.ref" collapse-tags :multiple="item.multiple" :placeholder="item.placeholder || '请选择'">
           <el-tooltip v-if="item.newWarehouse === false ? false : true" content="新建仓库" placement="top"   slot="prefix">
              <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;"
                        @click.stop="addWarehouse"></svg-icon>
           </el-tooltip>
           <el-option
               v-for="(item, index) in warehouse2.options"
               :label="item.label"
               :value="item.value">
          </el-option>
        </el-select>
      </span>
      <span v-else-if="item.type === 'selectTree'" :style="`display: flex;    `">
        <span v-if="item.required" class="text-center text-star" >*</span>
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}  ;    `">
          {{ item.text }}
        </span>
        <select-tree style="width: 150px;" @selectTreeGetCurrentNode="selectTreeGetCurrentNode" :item="item"/>
      </span>
      <span v-else-if="item.type === 'datetime'" :style="`display: flex;    `">
        <span v-if="item.required" class="text-center text-star" >*</span>
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}  ;     `">
          {{ item.text }}
        </span>
        <el-date-picker :style="`width: ${item.pickerWidth};`"
            v-model="item.value"
            type="datetime" :clearable="false"
            placeholder="选择日期时间">
        </el-date-picker>
      </span>
      <div v-else-if="item.type === 'dropdown'" style="display: flex;">
        <el-dropdown :split-button="item.splitButton || false" :hide-on-click="item.dropdownHideOnClick" @command="item.command" :trigger="item.trigger || 'click'">
          <el-button style="margin-left: 2px;" :size="item.size || 'mini'" @click.stop type="primary">
            <i :class="item.icon"/>
            {{ item.contentname }}  <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="item.disable" :command="index" :icon="item.icon"
                              v-for="(item, index) in item.list" style="color: #000;  font-size: 14px; padding: 5px 30px 5px 10px;  cursor: pointer;">
              {{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <span v-else-if="item.type === 'customerSetting'" :style="`display: flex; `">
        <span class="text-center"
              :style="`display: flex; word-break: keep-all; width: ${item.width}; display: flex;  justify-content: ${item.justifyContent || 'flex-end'};`">
          <span v-if="item.required" class="text-center text-star">*</span>
          {{ item.text }}
        </span>
        <el-select v-model="item.value" :style="`flex: 1; width: ${item.selectWidth};`" class="common-operation-form-icon"
                   remote placement="top" :fetch-suggestions="getCustomerList" value-key="label"
                   :ref="item.ref" placeholder="请选择客户">
           <el-tooltip content="新建客户" placement="top" slot="prefix">
              <svg-icon icon-class="plus" style="font-size: 16px; color: #1e1e1e;" @click.stop="getCustomerSettings"></svg-icon>
           </el-tooltip>
           <el-option
               v-for="item in customer.options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
          </el-option>
        </el-select>
    </span>
      <span v-else-if="item.type === 'addButton'" :style="`display: flex; margin-top: 12px;  `">
        <span v-if="item.required" class="text-center text-star">*</span>
        <span class="text-center"
              :style="`color: #0e0e0e; word-break: keep-all; font-size: 14px; width: ${item.width};`">
        </span>
        <div style="display: flex;">
          <el-link type="primary" @click="item.clickEvent" style="margin-right: 10px;" :underline="false" size="mini">新增模板</el-link>
          <el-link type="primary" @click="item.clickEvent" :underline="false" size="mini">修改当前选中模板</el-link>
        </div>
      </span>
      <span v-else-if="item.type === 'statistic'" class="common-statistic" :style="`display: flex;    `">
        <el-statistic
            group-separator=","
            :precision="2"
            :value="item.value"
            :title="item.title">
        </el-statistic>
        <div style="align-items: center; display: flex; position: relative; left: 50px; font-size: 18px;" v-if="item.iconClass">
          <svg-icon :icon-class="item.iconClass"/>
        </div>
      </span>
      <div v-else-if="item.type === 'dropdown2'" class="saveButton" style="display: flex;">
        <el-dropdown @click="item.click" :style="`top: ${item.top || '40px'};`" :split-button="item.splitButton || false"  :type="item.dropdownType || 'primary'" :size="item.size || 'mini'"
                     :hide-on-click="item.dropdownHideOnClick" @command="item.command" :trigger="item.trigger || 'click'">
          <span style="display: flex;">
            <svg-icon style="position: absolute;" :icon-class="item.icon"/>
            <div style=" width: 100%; font-weight: 500;  margin-left: 22px;  letter-spacing: 0;">{{ item.contentname }}</div>
          </span>
          <el-dropdown-menu   slot="dropdown">
            <el-dropdown-item style="color: rgb(101,106,141);  font-size: 14px; color: #000; padding: 5px 30px 5px 10px;  cursor: pointer;" :disabled="item.disable" :command="index"
                              v-for="(item, index) in item.list">
              <svg-icon :icon-class="item.icon" style="margin-right: 5px; font-weight: 500; color: #000;" />
              {{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <span v-else-if="item.type === 'radio'" :style="`display: flex;   `">
        <span v-if="item.required" class="text-center text-star">*</span>

        <el-radio v-model="item.value" @input="item.inputEvent" v-for="(item2, index) in item.options" :label="item2.value">{{item2.label}}</el-radio>
      </span>
      <span v-else-if="item.type === 'checkbox'" :style="`display: flex; align-items: center; `">
        <el-checkbox border v-model="item.value" @change="item.changeEvent">{{item.name}}</el-checkbox>
      </span>
      <span v-else-if="item.type === 'switch'" :style="`display: flex; align-items: center; `">
        <el-tooltip :content="'显示无欠款的供应商：' + item.value" placement="top">
          <el-switch
              v-model="item.value"
              :active-value="item.activeValue"
              :inactive-value="item.inactiveValue">
          </el-switch>
        </el-tooltip>
      </span>
      <span v-else-if="item.type === 'refresh'" :style="`display: flex; align-items: center; `">
         <div @click="item.clickEvent" style="  padding: 5px; border: 1px solid #DCDFE6;  border-radius: 4px;" class="refresh-class">
            <svg-icon title="刷新"   v-show="!item.loading" :icon-class="item.iconClass" style="font-size: 20px;"/>
            <i  title="刷新中" style="font-size: 20px;" v-show="item.loading" class="el-icon-loading"></i>
         </div>
      </span>
      <span v-else-if="item.type === 'refresh2'" :style="`display: flex; align-items: center; `">
         <div style=" padding:2px;   border-radius: 4px;" class="refresh-class">
            <svg-icon title="刷新" @click="item.clickEvent" v-show="!item.loading" :icon-class="item.iconClass" style="font-size: 14px;"/>
            <i  title="刷新中" style="font-size: 14px; " v-show="item.loading" class="el-icon-loading"></i>
         </div>
      </span>
    </span>
  </div>
</template>

<script>
import Vue from "vue";
import {addSettlementAccount, getSettlementAccountList} from "@/api/settlementAccount";
import {getUserInfo} from "@/utils/auth";
import {getEmployeeList} from "@/api/employee";
import {getCustomerList} from "@/api/customer";
import {getSupplierList} from "@/api/supplier";
import {getWarehouseList} from "@/api/warehouse";
import {keepTwoDecimalFull} from "@/utils";

export default {
  components: {
    SelectTree: () => import("@/components/SelectTree/index.vue"),
  },
  props: ["list", "marginRight", "marginLeft", "marginTop", "listIndex"],
  name: 'common-operation-form',
  data() {
    return {
      settlementAccount: {
        value: "",
        loading: false,
        options: [],
      },
      employee: {
        value: "",
        loading: false,
        options: [],
      },
      supplier: {
        value: "",
        loading: false,
        options: [],
      },
      customer: {
        value: "",
        loading: false,
        options: [],
      },
      warehouse: {
        value: "",
        loading: false,
        options: [],
      },
      warehouse2: {
        value: "",
        loading: false,
        options: [],
      }
    }
  },
  activated() {
    this.requireApi();
  },
  mounted() {
    this.requireApi();
  },
  methods: {
    keepTwoDecimalFull,
    requireApi() {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].type === 'settlementAccount') {
          this.getSettlementAccountList("",  this.list[i]);
        }

        if (this.list[i].type === 'employeeSetting') {
          this.getEmployeeList("", () => {},);
        }

        if (this.list[i].type === 'supplierSetting') {
          this.getSupplierList("", () => {},);
        }

        if (this.list[i].type === 'customerSetting') {
          this.getCustomerList("", () => {},);
        }

        if (this.list[i].type === 'warehouse') {
          this.getWarehouseList("", () => {},);
        }

        if (this.list[i].type === 'warehouse2') {
          this.getWarehouseList2("", () => {},);
        }
      }
    },
    selectTreeGetCurrentNode(v, v2) {
      v.value = v2['id'];
      v.node = v2['label'];
    },
    addSettlementAccount() {
      this.$router.push({path: "/basic_settings/settlement_account"});
    },
    addSupplier() {
      this.$router.push({path: "/basic_settings/supplier_manager"});
    },
    addWarehouse() {
      this.$router.push({path: "/basic_settings/warehouse_settings"});
    },
    getEmployeeSettings() {
      this.$router.push({path: '/system_settings/employee_settings'});
    },
    getCustomerSettings() {
      this.$router.push({path: '/basic_settings/customer_settings'});
    },
    getSettlementAccountList(queryString, item = null) {
      if (this.settlementAccount.loading)
        return;
      this.settlementAccount.loading = true;

      let options = [];
      getSettlementAccountList({
        userID: getUserInfo().userID,
        settlementAccountName: queryString,
      }).then(res => {
        console.log(res);
        let data = res.data.data;
        options = [];
        for (let i = 0; i < data.length; i++) {
          options.push({
            value: data[i]._id,
            label: data[i].accountName,
          });

          if (item && item.defaultSettlementAccount &&
              this.settlementAccount.value.length <= 0 && data[i].defaultSettlementAccount) {
            item.value = data[i].accountName;
          }
        }

        this.settlementAccount.options = options;
        this.settlementAccount.loading = false;
      });
    },
    getEmployeeList(queryString, cb) {
      if (this.employee.loading)
        return;
      this.employee.loading = true;

      let options = [];
      getEmployeeList({
        userID: getUserInfo().userID,
      }).then(res => {
        console.log(res);
        let data = res.data.data;
        options = [];
        for (let i = 0; i < data.length; i++) {
          options.push({
            value: data[i]._id,
            label: data[i].employeeName,
          });

          // if(data[i].defaultEmployee === true) {
          //   this.updateValueByType('employeeSetting', data[i]._id);
          // }
          if (data[i]._id === getUserInfo()._id) {
            this.updateValueByType('employeeSetting', data[i]._id);
          }

        }

        this.employee.options = options;
        this.employee.loading = false;
      });
    },
    getSupplierList(queryString, cb) {
      if (this.supplier.loading)
        return;
      this.supplier.loading = true;

      let options = [];
      getSupplierList({
        userID: getUserInfo().userID,
        supplierCategoryID: 1,
      }).then(res => {
        console.log(res);
        let data = res.data.data;
        // options = [{
        //   value: '',
        //   label: '全部供应商',
        // }];
        for (let i = 0; i < data.length; i++) {
          options.push({
            value: data[i]._id,
            label: data[i].supplierName,
          });

          if(data[i].defaultSupplier === true) {
            this.updateValueByType('supplierSetting', data[i]._id);
          }
        }

        console.log("供应商：", options);

        this.supplier.options = options;
        this.supplier.loading = false;
      });
    },
    getCustomerList(queryString, cb) {
      if (this.customer.loading)
        return;
      this.customer.loading = true;

      let options = [];
      getCustomerList({
        userID: getUserInfo().userID,
        customerCategoryID: 1,
      }).then(res => {
        console.log(res);
        let data = res.data.data;

        for (let i = 0; i < data.length; i++) {
          options.push({
            value: data[i]._id,
            label: data[i].customerName,
          });

          if(data[i].defaultCustomer === true) {
            this.updateValueByType('customerSetting', data[i]._id);
          }
        }

        this.customer.options = options;
        this.customer.loading = false;
      });
    },
    updateValueByType(type, value) {
      for (let i = 0; i < this.list.length; i++) {
        // 如果value已经有值了 就表示不用默认值
        if (this.list[i].type === type && this.list[i].value === '') {
          this.list[i].value = value;
        }
      }
    },
    getWarehouseList(queryString, cb) {
      if (this.warehouse.loading)
        return;
      this.warehouse.loading = true;

      let options = [];
      getWarehouseList({
        userID: getUserInfo().userID,
      }).then(res => {
        console.log(res);
        let data = res.data.data;
        options = [{
          value: '',
          label: '全部仓库',
        }];
        for (let i = 0; i < data.length; i++) {
          options.push({
            value: data[i]._id,
            label: data[i].warehouseName,
          });

        }

        this.warehouse.options = options;
        this.warehouse.loading = false;
      });
    },
    getWarehouseList2(queryString, cb) {
      if (this.warehouse2.loading)
        return;
      this.warehouse2.loading = true;

      let options = [];
      getWarehouseList({
        userID: getUserInfo().userID,
      }).then(res => {
        console.log(res);
        let data = res.data.data;
        options = [];
        for (let i = 0; i < data.length; i++) {
          options.push({
            value: data[i],
            label: data[i].warehouseName,
          });

        }

        this.warehouse2.options = options;
        this.warehouse2.loading = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    background: #fff;
    margin: 20px;
    box-shadow: 0px 0px 10px 0px rgba(45, 51, 65, 0.08);
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.text-center {
  display: flex;
  align-content: center;
  align-items: center;
}
</style>

<style>
.select-group  {
  min-width: 250px !important;
}

.paper-not-ticket {

}

.paper-not-ticket .el-scrollbar__bar.is-vertical {
  display: none;
}

.paper-not-ticket .el-select-dropdown__wrap {
  min-height: 375px !important;
}


.common-operation-form .el-select {
  z-index: 9 !important;
}

.colorPicker .el-color-picker__trigger{
  border: none !important;
}

.colorPicker .el-color-picker--mini {
  display: flex;
  align-items: center;
}

.colorPicker .el-color-picker--mini .el-color-picker__trigger {
  height: 24px !important;
  width: 24px !important;
}

.numberRangeInput {

}

.common-operation-form-icon .el-input__prefix{
  text-align: right;
  right: 8px;
  top: 8px;
  z-index: 99999;
  cursor: pointer;
  //position: relative;
  //width: 25px;
  margin-right: 0;
  margin-left: auto;
  width: 25px;
}

.common-operation-form-icon  .el-input--prefix .el-input__inner {
  padding-left: 10px;
}

.saveButton .el-button-group > .el-button:last-child{
  height: 40px;
  font-size: 16px;
  //background: #fff !important;
  //color: #fff;
  //color: #1f2329;
  border-left-color: #d0d3d6 !important;
  border-right-color: #d0d3d6 !important;
  border-top-color: #d0d3d6 !important;
  border-bottom-color: #d0d3d6 !important;
}

.saveButton .el-button-group > .el-button:first-child {
  height: 40px;
  font-size: 16px;
  //background: #fff !important;
  //color: #1f2329;
  border-left-color: rgb(240, 240, 240) !important;
  border-top-color: #d0d3d6 !important;
  border-bottom-color: #d0d3d6 !important;
  border-right-color: #d0d3d6 !important;
}

.common-statistic .el-statistic .head {
  font-size: 16px;
  font-weight: 500;
}

.common-statistic .el-statistic .con {
  //position: relative;
  //top: 5px;
  margin-top: 10px;
}

.common-statistic .el-statistic .con span {
  font-size: 22px;
  font-weight: 900;
  color: #1f2329;
}

.saveButton .el-dropdown .el-dropdown__caret-button:before {
  background: #d0d3d6;
}

.saveButton .el-button-group .el-button--primary:hover {
  background-color: #f2f3f5 !important;
  border-color: #d0d3d6 !important;
}

.numberRangeInput .el-button {
  padding: 4px !important;
  font-size: 16px;
  color: #000;
  border-radius: 4px;
}

.numberRangeInput .el-button:hover {
  background: #1F23291A;
}

.iconButton-choose  {
  background: #1F23291A !important;
}

.select-group .el-select-dropdown__wrap {
  min-height: 510px;
}

.numberRangeSelect input {
  border: none !important;
}

.iconButton-iconName {
  font-size: 12px;
  font-weight: 500;
  margin-left: 2px;
  margin-right: 2px;
  position: relative;
  top: -1px;
}

.refresh-class:hover {
  border-radius: 4px;
  background: rgba(31, 35, 41, 0.1);
  color: #2b2f36;
}
</style>
